import React, { Component } from 'react'

export default class LifeCycle extends Component {
    state={
        msg:'Here is lifecycle'
    }
    constructor(){
        super()
        console.log(this);
    }
    //挂载阶段==============vue.created
        /* componentWillMount(){
            console.log(this.state.msg,'---msg---');
            let obj = document.querySelector('#msg')
            console.log(obj,'<p></p>');
            console.log('--------componentWillMount--------');
        }
        render() {
            console.log(this.state.msg,'---msg---');
            let obj = document.querySelector("#msg")
            console.log(obj,'<p></p>');
            console.log('--------render--------')
            return (
                <div>
                    <p id='msg'>{this.state.msg}</p>
                </div>
            )
        }
        componentDidMount(){
            console.log(this.state.msg,'---msg---');
            let obj = document.querySelector("#msg")
            console.log(obj,'<p></p>');
            console.log('--------componentDidMount--------')
        } */
    //修改阶段==============vue.updated
        change(){
            this.setState({msg:'Here is Another LifeCycle'})
        }
        shouldComponentUpdate(old,news){
            console.log(this.state.msg,'shouldComponentUpdate');
            if(this.state.msg===news.msg){
                console.log('none change');
                return false
            }else{
                console.log('changed');
                return true
            }
        }
        UNSAFE_componentWillUpdate(){
            console.log(this.state.msg,'WillUpdate');
        }
        componentDidUpdate(){
            console.log(this.state.msg,'DidUpdate');
        }
        render(){
            console.log(this.state.msg,'render');
            return(
                <div>
                    <p id='msg'>{this.state.msg}</p>
                    <button onClick={this.change.bind(this)}>change</button>
                </div>
            )
        }
        
}
